<template>
  <view class="cat">
      <UgoSearch/>
      <view class="menus-goods">
          <!-- 左边导航 -->
        <view class="menus">
            <view :class="['menus-nav',activeIndex===index?'active':'']" v-for="(nav,index) in menus" @click="handleMenu(index)" :key="index">{{nav}}</view>
        </view>
        <!-- 右边商品列表 -->
        <view class="goods">
            <view class="goods-list" v-for="good in goods" :key="good.cat_id">
                    <!-- 商品标题部分 -->
                <view class="goods-list-title">{{good.cat_name}}</view>
                <!-- 商品列表部门 -->
                <view class="goods-list-goods">
                    <navigator :url="'/pages/goods_list/goods_list?cid='+imgName.cat_id" v-for="imgName in good.children" :key="imgName.cat_id">
                        <u-image  width="120rpx" height="120rpx" mode="scaleToFill" :src="imgName.cat_icon"></u-image>
                        <view class="goods-name">{{imgName.cat_name}}</view>
                    </navigator>
                </view>
            </view>
        </view>
      </view>
      
  </view>
</template>


<script>
export default {
    data () {
        return {
            activeIndex:0,//选中左边导航的内容
            menus:[],//存放左边导航商品的数据
            goods:[]//存放右边商品数据
        }
    },
    created(){
        // 定义一个普通的全局变量，用来存放后台返回来的总体数据
        this.catList = []
        this.getGoodsCategory()
    },
  
    methods:{
        async getGoodsCategory(){
            // 发送请求
            this.catList = await this.$u.http.get('/categories')
            // 将获取回来的数据进行加工分类
            this.menus = this.catList.map(cat=>cat.cat_name)
            this.goods = this.catList[this.activeIndex].children
        },
        // 当点击导航列表，更换右边显示的数据
        handleMenu(activeIndex){
            this.activeIndex = activeIndex
            this.goods = this.catList[this.activeIndex].children
        }
    }
}
</script>


<style lang="scss" scoped>
.cat{
    height: 100vh;
    display: flex;
    flex-direction: column;
    .menus-goods{
        flex: 1;
        display: flex;
        overflow: hidden;
        .menus{
                width: 182rpx;
                overflow: auto;
                background-color: #F3F3F3;
                .menus-nav{
                    height: 82rpx;
                    text-align: center;
                    line-height: 82rpx;
                }
                .active{
                    position: relative;
                    color: $themeColor;
                    &::before{
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 0;
                        height: 70%;
                        width: 5rpx;
                        transform: translateY(-50%);
                        background-color: $themeColor;
                    }
                }
        }
        .goods {
                flex: 1;
                overflow: auto;
                .goods-list {
                    .goods-list-title {
                        text-align: center;
                        height: 82rpx;
                        line-height: 82rpx;
                        &::before,&::after{
                            content: '/';
                            margin: 0 5px;
                            color: #ccc;
                        }
                    }
                    .goods-list-goods {
                        display: flex;
                        flex-wrap: wrap;
                        navigator {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            width: 33.33%;
                        }
                    }
                }
        }
    }
    
}
</style>